<!-- my-page.vue -->
<template>
  <div>
    <!-- 
      name(必传)：应用名称
      url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
      baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/my-page`
     -->
    <micro-app
      name="vue2+webpack5"
      url="http://localhost:3000/"
      baseroute="/v2-wbp5"
      :data="microAppData"
      @created="handleCreate"
      @beforemount="handleBeforeMount"
      @mounted="handleMount"
      @unmount="handleUnmount"
      @error="handleError"
      @datachange="handleDataChange"
    />
  </div>
</template>
<script lang="ts">
import microApp from "@micro-zoe/micro-app"
import { removeDomScope } from "@micro-zoe/micro-app"
import router from "@/router"
export default {
  name: "vue2",
  data() {
    return {
      microAppData: {
        msg: "jwh1998",
        pushState: (path) => {
          removeDomScope()
          router.push(path)
        }
      }
    }
  },
  methods: {
    handleCreate(): void {
      console.log("vue2+webpack5 创建了")
    },
    handleBeforeMount(): void {
      console.log("vue2+webpack5 即将被渲染")
    },
    handleMount(): void {
      console.log("vue2+webpack5 已经渲染完成")
      setTimeout(() => {
        // @ts-ignore
        this.microAppData = { xxx: { x: 1 }, msg: null }
      }, 2000)
    },
    handleUnmount(): void {
      console.log("vue2+webpack5 卸载了")
    },
    handleError(): void {
      console.log("vue2+webpack5 加载出错了")
    },
    handleDataChange(e: CustomEvent): void {
      console.log("来自子应用 vue2+webpack5 的数据:", e.detail.data)
      if (e.detail.data) {
        console.log(e.detail.data)
        // 发送数据给子应用 my-app，setData第二个参数只接受对象类型
        microApp.setData("vue3+webpack", { dataFromV3App: e.detail.data })
      }
    }
  }
}
</script>
